<div class="roles-manager">
  <div class="roles-manager-title">
     <span>
       角色管理
     </span>
  </div>
  <div class="roles-manager-header">
    <div class="roles-manager-search">
      <div class="ui-inputgroup">
       <!-- <input type="text" pInputText placeholder="搜索"/>
        <button pButton type="button" icon="pi pi-search" class="ui-button-warn" (click)="roleSearchOperate()"></button>-->
      </div>
    </div>
    <div class="roles-manager-button">
      <button pButton type="button" label="添加角色" class="ui-button-rounded" (click)="roleOperate(roleOperateFlag='add')"></button>
    </div>
  </div>
  <div class="roles-manager-table">
    <p-table
      [scrollable]="true" scrollHeight="55vh"
      [columns]="roleTableHeader"
      [value]="roleTableData" dataKey="id"
    >
      <ng-template pTemplate="header" let-columns>
        <tr>
          <th>序号</th>
          <th *ngFor="let col of columns">
            {{col.header}}
          </th>
          <th>操作</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-tableData let-columns="columns" let-index="rowIndex" let-rowIndex="rowIndex">
        <tr [pSelectableRow]="tableData" [pReorderableRow]="index" [pSelectableRowIndex]="rowIndex">
          <td>{{rowIndex + 1}}</td>
          <td *ngFor="let col of columns">
            <span *ngIf="col.field === 'level'">{{tableData[col.field]}}</span>
            <span *ngIf="col.field !== 'level'">{{tableData[col.field] === 1 ? '是' : tableData[col.field] === 0 ? '否' : tableData[col.field]}}</span>
          </td>
          <td>
            <button
              pButton type="button" label="编辑"
              (click)="this.roleOperate(roleOperateFlag='update',tableData)"
              class="ui-button-rounded">
            </button>
          <!--  <button
              pButton type="button" label="删除"
              (click)="this.roleOperate(roleOperateFlag='del',tableData)"
              class="ui-button-pink ui-button-rounded ml-2 mr-2">
            </button>-->
            <button
              pButton type="button" label="查看权限"
              class="ui-button-darkPrimary ui-button-rounded ml-2 mr-2"
              (click)="roleOperate(roleOperateFlag='permission', tableData)">
            </button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
  <div class="roles-manager-pagination">
    <app-pagination [option]="rolePageOption" (clickEvent)="rolePageEvent($event)"></app-pagination>
  </div>
  <div class="roles-manager-modal">
    <!--权限详情弹窗-->
    <p-dialog
      [blockScroll]="true"
      [(visible)]="rolePermissionModal" [style]="{width: '40vw'}"
    >
      <p-header>权限详情</p-header>
      <div style="width: 100%;height: 26vh;overflow: hidden">
        <p-scrollPanel [style]="{width: '100%', height: '100%'}" styleClass="role-scroll">
          <p-tree [value]="rolePermissionInfo" [style]="{width: '100%'}" emptyMessage="该角色没有任何权限"></p-tree>
        </p-scrollPanel>
      </div>
    </p-dialog>
    <!--角色新增/编辑弹窗-->
    <p-dialog
      [blockScroll]="true"
      [(visible)]="roleUpdateModal" [style]="{width: '50vw'}"
    >
      <p-header>{{roleOperateFlag === 'update' ? '角色编辑' : '角色添加'}}</p-header>
      <div style="width: 100%;height: 30vh;overflow: hidden">
        <p-scrollPanel [style]="{width: '100%', height: '100%'}" styleClass="role-scroll">
          <div class="ui-g">
            <!--受培训单位-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>角色名称：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <input type="text" pInputText placeholder="请填写角色名称" ngModel required
                       [(ngModel)]="roleInputField.roleName">
                <p class="text-danger mt-1" *ngIf="!roleInputField.roleName">角色名称必填</p>
              </div>
            </div>
            <!--是否能看全部隐患-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>是否能看全部隐患：</span>
              </label>
              <div class="ui-g-8 ui-md-8 radioButton">
                <p-radioButton name="whetherSee" value="1" label="是"
                               [(ngModel)]="roleInputField.whetherSee"></p-radioButton>
                <p-radioButton name="whetherSee" value="0" label="否" styleClass="ml-3"
                               [(ngModel)]="roleInputField.whetherSee"></p-radioButton>
              </div>
            </div>
            <!--是否启用-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>是否启用：</span>
              </label>
              <div class="ui-g-8 ui-md-8">
                <p-radioButton name="enabled" value="1" label="是" [(ngModel)]="roleInputField.enabled"></p-radioButton>
                <p-radioButton name="enabled" value="0" label="否" styleClass="ml-3"
                               [(ngModel)]="roleInputField.enabled"></p-radioButton>
              </div>
            </div>
            <!--等级-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>等级：</span>
              </label>
              <div class="ui-g-8 ui-md-8 input">
                <p-dropdown
                  [options]="roleDropdown"
                  [(ngModel)]="roleDropdownSelect"
                  [placeholder]="roleDropdownSelect?.name?roleDropdownSelect.name: '请选择等级'"
                  optionLabel="name">
                </p-dropdown>
              </div>
            </div>
          </div>
          <!--选择权限-->
          <div class="ui-g">
            <!--web端权限配置-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>web端权限配置：</span>
              </label>
              <div class="ui-g-10 ui-md-8 input">
                <p-tree
                  [value]="roleWebPermissionTree" [style]="{width: '100%'}"
                  emptyMessage="暂无WEB端权限数据"
                  selectionMode="checkbox" [(selection)]="roleWebPermissionSelected"
                ></p-tree>
              </div>
            </div>
            <!--app端权限配置-->
            <div class="ui-g-6 ui-md-6">
              <label class="ui-g-4 ui-md-4 label">
                <span>app端权限配置：</span>
              </label>
              <div class="ui-g-10 ui-md-8 input">
                <p-tree
                  [value]="roleAppPermissionTree" [style]="{width: '100%'}"
                  emptyMessage="暂无APP端权限数据"
                  selectionMode="checkbox" [(selection)]="roleAppPermissionSelected"
                ></p-tree>
              </div>
            </div>
          </div>
        </p-scrollPanel>
      </div>
      <p-footer>
        <button pButton label="保存" (click)="roleOperate(roleOperateFlag='save')"></button>
        <button pButton label="取消" class="ui-button-pink" (click)="roleUpdateModal = false"></button>
      </p-footer>
    </p-dialog>
  </div>
</div>
